<template>
  <div :class="'container' + index" class="bookContainer">
    <!-- /* box为整个页面展示区 */ -->
    <div id="box" class="box" :class="'boxWrap' + index">
      <!-- /* page有前后两面 */ -->
      <div class="page" :class="'page' + index">
        <!-- 封面 -->
        <div class="front" :class="'front' + index" @click="togoleRegister(true)"></div>
        <!-- 封面内侧 -->
        <div class="back" :class="'back' + index" @click="togoleRegister(false)"></div>
      </div>
      <!-- /* page2为翻页之后显示的*/ -->
      <div class="pageLast" @click="togoleRegister(false)"></div>
    </div>
    <!-- 族谱标签图片 (一公谱，二公谱...) -->
    <img :src="img" class="jiaobiao" :class="'jiaobiao'+index" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      bReady: true,
      zupuList: []
    }
  },
  props: {
    index: Number,
    current: Number,
    img:String
  },
  mounted() {},
  watch: {
    current() {
      var oPage = document.querySelector('.page' + this.index)
      let container = document.querySelector('.container' + this.index)
      let oBox = document.querySelector('.boxWrap' + this.index)
      let jiaobiao = document.querySelector('.jiaobiao' + this.index)
      if (this.current !== this.index) {
        if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
          container.style.width = '70px'
          jiaobiao.style.left = '50%'
        } else {
          container.style.width = '204px'
          jiaobiao.style.left = '28%'
        }
        container.style.left = '0'
        container.style.transition = '1s all ease'
        jiaobiao.style.transition = '1s all ease'
        oBox.style.zIndex = '1'
        oBox.style.transition = '1s all ease'
        oPage.style.transition = '1s all ease'
        oPage.style.transform = 'perspective(800px) rotateY(0)'
      }
    }
  },
  methods: {
    togoleRegister(val) {
      // 点击切换族谱事件
      let oBox = document.querySelector('.boxWrap' + this.index)
      var oPage = document.querySelector('.page' + this.index)
      let container = document.querySelector('.container' + this.index)
      let jiaobiao = document.querySelector('.jiaobiao' + this.index)
      if (this.bReady == false) return
      this.bReady = false
      if (val == true) {
        if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
          container.style.width = '90px'
          container.style.left = '-32px'
          jiaobiao.style.left = '68%'
        } else {
          container.style.width = '404px'
          container.style.left = '-64px'
          jiaobiao.style.left = '53%'

        }
        jiaobiao.style.transition = '1s all ease'
        container.style.transition = '1s all ease'
        oBox.style.zIndex = '30'
        oBox.style.transition = '1s all ease'
        /* 所有的运动都完成后就将this.bReady赋值 为true*/
        oPage.style.transition = '1s all ease'
        oPage.style.transform = 'perspective(800px) rotateY(180deg) '
        oPage.addEventListener(
          'webkitTransitionEnd',
          () => {
            /* 所有的运动都完成后就将this.bReady赋值 为true*/
            this.bReady = true
          },
          false
        )
        // oPage.style.opacity = '0'
      } else {
        if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
          container.style.width = '70px'
          jiaobiao.style.left = '50%'
        } else {
          container.style.width = '204px'
          jiaobiao.style.left = '28%'
        }
        jiaobiao.style.transition = '1s all ease'
        container.style.left = '0'
        container.style.transition = '1s all ease'
        oBox.style.zIndex = '1'
        oBox.style.transition = '1s all ease'
        oPage.style.width = '100%'
        oPage.style.transition = '1s all ease'
        oPage.style.transform = 'perspective(800px) rotateY(0) '
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bookContainer {
  width: 204px;
  height: 259px;
  position: relative;
  transition:all 2s  ease
}
/* 将页面展示区box设置宽高背景 */
.box {
  width: 204px;
  height: 259px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-102px, -50%);
}

/* 设定page的位置 */
.page {
  width: 204px;
  height: 259px;
  top: 0;
  right: 61px;
  position: absolute;
  /* 将开启3d空间，方便翻页后front和back的3d变换 */
  transform-style: preserve-3d;
  /* 奇点设为右边 */
  transform-origin: right center;
  /* 设置翻书（旋转）的运动时间，运动形式 */
  transition: 1s all ease;
  /* 提升层级否则会被盖住 */
  z-index: 2;
  /* 设置景深来更好的展示3D效果，并给旋转角度一个初始值，防止抖动发生 */
  transform: perspective(800px) rotateY(0deg);
}

/* 配置旋转页的前页 */
.page .front {
  /* 宽高与父级page一样 */
  width: 173px;
  height: 256px;
  position: absolute;
  right: 0;
  top: 0;
  /* 将背景设成为与前一页相同的背景,并且只要右面的那部分，与页面左部分拼接 */
  background-size: 100% 100%;
  /* backface-visibility属性和3D transform效果相关，它决定当一个元素的背面面是否可见 */
  backface-visibility: hidden;
  /* 提升层级否则会被盖住 */
  z-index: 2;
  background-position: 0;
}
// 卷一到卷封面
.page .front0{
   background: url('../assets/img/juan1.png') 0 0 no-repeat;
}
.page .front1{
   background: url('../assets/img/juan2.png') 0 0 no-repeat;
}
.page .front2{
   background: url('../assets/img/juan3.png') 0 0 no-repeat;
}
.page .front3{
   background: url('../assets/img/juan4.png') 0 0 no-repeat;
}
// 卷一到卷封面  end

/* 配置旋转页的后页 */
.page .back {
  /* 宽高与父级page一样 */
  width: 173px;
  height: 256px;
  /* 将背景设成为与下一页相同的背景,并且只要左面的那部分，与右部分的page2拼接 */
  background: url('../assets/img/gaizi.png') 0 0 no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  top: 0;
  /* 这里设置将back进行水平方向上的镜像变化，因为当page旋转180°后， back显示的效果不对*/
  transform: scale(-1, 1);
  /* 改变层级避免盖住其他页面 */
  z-index: 1;
}

/* 配置pages展示区 */
.pageLast {
  /* 因为其只在页面右侧展示所以宽为Box的一半 */
  width: 204px;
  height: 259px;
  top: 0;
  right: 35px;
  // right: 0;
  position: absolute;
  /* 将背景设成为与下一页相同的背景,并且只要右面的那部分，与左部分（.page .back）拼接 */
  background: url('../assets/img/di.png') 0 0 no-repeat;
  background-size: 100% 100%;
  /* 改变层级避免盖住其他页面 */
  z-index: 1;
}
.jiaobiao{
  display: block;
  width: 116px;
  // height: 28px;
  left: 28%;
  bottom: -35px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 31;
}
@media screen and (max-width: 768px) {
  .jiaobiao{
  display: block;
  width: 60px;
  height: 28px;
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  z-index: 31;
}
  .bookContainer {
    width: 62px;
    height: 79px;
    position: relative;
  }
  /* 将页面展示区box设置宽高背景 */
  .box {
    width: 62px;
    height: 79px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* 设定page的位置 */
  .page {
    /* 因为其在展示区右侧，所以宽度为整个box的一般，并定在右侧 */
    // width: 50%;
    width: 62px;
    height: 79px;
    top: 0;
    right: 0;
    position: absolute;
    /* 将开启3d空间，方便翻页后front和back的3d变换 */
    transform-style: preserve-3d;
    /* 奇点设为右边 */
    transform-origin: right center;
    /* 设置翻书（旋转）的运动时间，运动形式 */
    transition: 1s all ease;
    /* 提升层级否则会被盖住 */
    z-index: 2;
    /* 设置景深来更好的展示3D效果，并给旋转角度一个初始值，防止抖动发生 */
    transform: perspective(800px) rotateY(0deg);
  }

  /* 配置旋转页的前页 */
  .page .front {
    /* 宽高与父级page一样 */
    width: 62px;
    height: 79px;
    position: absolute;
    left: 0;
    top: 0;
    /* 将背景设成为与前一页相同的背景,并且只要右面的那部分，与页面左部分拼接 */
    background-size: 100% 100%;
    /* backface-visibility属性和3D transform效果相关，它决定当一个元素的背面面是否可见 */
    backface-visibility: hidden;
    /* 提升层级否则会被盖住 */
    z-index: 2;
  }

  /* 配置旋转页的后页 */
  .page .back {
    /* 宽高与父级page一样 */
    width: 62px;
    height: 79px;
    /* 将背景设成为与下一页相同的背景,并且只要左面的那部分，与右部分的page2拼接 */
    background: url('../assets/img/gaizi.png') 0 0 no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* 这里设置将back进行水平方向上的镜像变化，因为当page旋转180°后， back显示的效果不对*/
    transform: scale(-1, 1);
    /* 改变层级避免盖住其他页面 */
    z-index: 1;
  }

  /* 配置pages展示区 */
  .pageLast {
    /* 因为其只在页面右侧展示所以宽为Box的一半 */
    width: 62px;
    height: 79px;
    top: 0;
    right: -7px;
    // right: 0;
    position: absolute;
    /* 将背景设成为与下一页相同的背景,并且只要右面的那部分，与左部分（.page .back）拼接 */
    background: url('../assets/img/di.png') 0 0 no-repeat;
    background-size: 100% 100%;
    /* 改变层级避免盖住其他页面 */
    z-index: 1;
  }
}
</style>
